<template>
    <div class="product-index yuan-container">
        <a-card title="生产管理">
            <div class="filter-panel">
                <a-input-search class="filter-list" allowClear v-model="keywords" placeholder="品名/生产批号/操作人" @search="resetList" />
                <a-button type="primary" @click="add" class="filter-list" style="float: right;"
                    v-if="$utilCheckPermission(['productionManagementAdd'])">新增</a-button>

            </div>
            <a-tabs type="card" @change="tabChange">
                <a-tab-pane v-for="(item,i) in tabs" :key="item.rawType" :tab="item.name">
                    <div class="table">
                        <a-table bordered :rowKey="getRowKey" :columns="columns" :data-source="pageList" :pagination="pagination" :loading="loading"></a-table>
                    </div>
                </a-tab-pane>
            </a-tabs>
        </a-card>
        <ProductAdd :productType="tabKey" :visible="addProductVisible" @closeModal="() => addProductVisible = false" :editId="editId"
            @resetList="getList" />
        <ProductDetail :visible="detailProductVisible" @closeModal="() => detailProductVisible = false" :editId="editId" />

        <a-modal :width="addInputModalOption.width" :visible="addInputModalOption.visible" :title="addInputModalOption.title" @ok="addInputModalOption.onOk" @cancel="addInputModalOption.onCancel"
                 :okText="addInputModalOption.okText" :cancelText="addInputModalOption.cancelText" class="yuan-modal testing-add-modal">
            <a-form-model ref="addInputForm" :model="addInputModalOption.formData" :rules="addInputModalOption.rules">
                <a-form-model-item label="增加产量" prop="residueNum">
                    <a-input-number style="width: 100%" v-model="addInputModalOption.formData.residueNum" />
                </a-form-model-item>
            </a-form-model>
        </a-modal>
    </div>
</template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import { h } from "vue";
import nextApi, { ProductionListRes } from "@/api/nextApi";
import ProductAdd from "./components/productAdd.vue";
import ProductDetail from "./components/productDetail.vue";
@Component({
    name: "productionManagementIndex",
    components: { ProductAdd, ProductDetail },
})
export default class extends Vue {
    keywords = "";
    loading = false;
    tabs:any = [
        {name:'中药饮片(半成品)', rawType:'中药饮片(半成品)'},
        {name:'直服饮片(半成品)', rawType:'直服饮片(半成品)'},
        {name:'单方饮片(半成品)',rawType: '单方饮片(半成品)'}
    ]
    pagination = {
        pageSize: 10,
        current: 1,
        total: 0,
        showTotal: (total: number) => `共${total}条`,
        onChange: this.pageChange,
    };
    pageList: ProductionListRes[] = [];
    columns = [
        {
            title: "序号",
            dataIndex: "index",
            key: "index",
            align: "center",
            customRender: (text: string, record: ProductionListRes, index: number) => `${index + 1}`,
        },
        {
            align: "center",
            dataIndex: "varietyName",
            key: "varietyName",
            title: "品名",
        },
        {
            align: "center",
            dataIndex: "productionBatch",
            key: "productionBatch",
            title: "生产批号",
        },
        {
            align: "center",
            dataIndex: "productionTime",
            key: "productionTime",
            title: "生产日期",
        },
        {
            align: "center",
            dataIndex: "practicalYield",
            key: "practicalYield",
            title: "生产数量",
            customRender: (text: string, record: any, index: number) => `${record.practicalYield}${record.unit}`,
        },
        {
            align: "center",
            dataIndex: "surplus",
            key: "surplus",
            title: "剩余量",
            customRender: (text: string, record: any, index: number) => `${record.surplus}${record.unit}`,
        },
        {
            align: "center",
            dataIndex: "medicineClass",
            key: "medicineClass",
            title: "中药等级",
            customRender: (text: string, record: any, index: number) => `${record.medicineClass?record.medicineClass:'-'}`,
        },
        {
            align: "center",
            dataIndex: "productBigKind",
            key: "productBigKind",
            title: "产品大类",
        },
        {
            align: "center",
            dataIndex: "principal",
            key: "principal",
            title: "操作人",
        },
        {
            align: "center",
            dataIndex: "packState",
            key: "packState",
            title: "状态",
            customRender: (text: string, record: ProductionListRes, index: number) => {
                const stateBox = h(
                    "div",
                    { class: record.packState === 0 ? "" : "c-success" },
                    record.packState === 0 ? "未包装" : "已包装"
                );
                return stateBox;
            },
        },
        {
            align: "center",
            dataIndex: "action",
            key: "action",
            title: "操作",
            width: 360,
            customRender: (text: string, record: ProductionListRes, index: number) => {
                const detailBtn = h(
                    "a-button",
                    {
                        style: { marginRight: "5px" },
                        props: { icon: "eye", type: "primary", size: "small" },
                        on: { click: () => this.showDetail(record) },
                    },
                    "详情"
                );
                const editBtn = h(
                    "a-button",
                    {
                        style: { marginRight: "5px" },
                        props: { icon: "edit", type: "primary", size: "small" },
                        on: { click: () => this.editDetail(record) },
                    },
                    "编辑"
                );
                const deleteBtn = h(
                    "a-popconfirm",
                    {
                        style: { marginRight: "5px" },
                        props: { title: "确定要删除吗？", okText: "确定", cancelText: "取消" },
                        on: { confirm: () => this.remove(record) },
                    },
                    [
                        h(
                            "a-button",
                            {
                                props: { icon: "delete", type: "danger", size: "small" },
                            },
                            "删除"
                        ),
                    ]
                );
                const addInputBtn = h(
                    "a-button",
                    {
                        style: { marginRight: "5px" },
                        props: { icon: "edit", type: "primary", size: "small" },
                        on: { click: () => this.addInput(record) },
                    },
                    "增加产量"
                );
                const btn: any[] = [];
                if (this.$utilCheckPermission(["productionManagementDetails"])) btn.push(detailBtn);
                if (record.packState !== 1 && this.$utilCheckPermission(["productionManagementCompile"])) btn.push(editBtn);
                if (this.$utilCheckPermission(["productionManagementRemove"])) btn.push(deleteBtn);
                if (this.$utilCheckPermission(["productionManagementAddYield"])) btn.push(addInputBtn)
                return h("div", btn);
            },
        },
    ];
    addInputModalOption = {
        visible:false,
        loading:false,
        title:'增加产量',
        width:600,
        okText:'确定',
        cancelText:'取消',
        formData:{
            id:"",
            residueNum:null,
        },
        rules:{
            residueNum:[
                {required:true,message:'请输入产量',trigger:'blur'}
            ]
        },
        onOk:()=>{
            this.addInputOk()
        },
        onCancel:()=>{
            this.addInputModalOption.visible = false
        }

    }
    addInput(record:any){
        this.addInputModalOption.visible = true
        this.addInputModalOption.formData.id = record.id
    }
    addInputOk(){
        (this.$refs.addInputForm as any).validate(async (valid: boolean) => {
            if(valid){
                try{
                    this.addInputModalOption.loading = true
                    const res = await nextApi.addYield(this.addInputModalOption.formData)
                    this.$message.success(res.msg)
                    await this.getList()
                }finally {
                    this.addInputModalOption.loading = false
                    this.addInputModalOption.visible = false
                    await this.getList()
                }
            }
        })
    }
    tabKey = '中药饮片(半成品)'
    tabChange(e){
        console.log(e)
        this.tabKey = e
        this.getList()
    }
    getRowKey(item: any) {
        return item.id;
    }

    async getList() {
        this.pageList = [];
        try {
            this.loading = true;
            const res = await nextApi.getProList({
                pageSize: this.pagination.pageSize,
                pageNum: this.pagination.current,
                varietyName: this.keywords,
                productType:this.tabKey
            });
            this.pagination.total = res.data?.total || 0;
            this.pageList = res.data?.rows || [];
        } finally {
            this.loading = false;
        }
    }
    resetList() {
        this.pagination.current = 1;
        this.getList();
    }
    detailProductVisible = false;
    showDetail(item: ProductionListRes) {
        this.editId = item.id;
        this.detailProductVisible = true;
    }

    addProductVisible = false;

    editId = "";
    editDetail(item: ProductionListRes) {
        this.editId = item.id;
        this.addProductVisible = true;
    }
    add() {
        this.editId = "";
        this.addProductVisible = true;
    }
    async remove(item: ProductionListRes) {
        this.loading = true;
        try {
            const res = await nextApi.deletePro(item.id);
            this.$message.success(res.msg);
            await this.getList();
        } finally {
            this.loading = false;
        }
    }
    pageChange(page: number, pageSize: number) {
        this.pagination.pageSize = pageSize;
        this.pagination.current = page;

        this.getList();
    }
    async mounted() {
        await this.getList();
    }
}
</script>
<style lang="scss">
.product-index {
    padding: 20px;
}
</style>
